<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页</title>
    <link href="./static/css/global.css" rel="stylesheet"/>
    <link href="./static/css/element-ui2.15.7.min.css" rel="stylesheet"/>
  </head>
  <style stype="text/css">
    .container { 
      width: 100%;
      height: 100vh;
     }
    .bg-img {
      z-index: -5;
      position: absolute;
      width: 100%;
      height: 100%;
      transition: all 0.8s ease 0s;
    }
    .login-box{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .login-content{
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      background-color: #fff;
      border-radius: 10px;
      padding: 45px 20px;
      width: 320px;
    }
    .login-title{
      color: rgba(0,0,0,0.65);
      font-size: 22px;
      height: 24px;
      min-height: 24px;
      margin-bottom: 36px;
      font-weight: 600;
    }
    .login-form{
      min-height: 32px;
    }
    .login-form-input>.el-input-group__append{
      background-color: #68aaef;
      border: 1px solid #68aaef;
      cursor: pointer;
      padding: 0;
    }
    .login-form-input>.el-input-group__append:hover{
      background-color: #409EFF;
      border: 1px solid #409EFF;
    }
  </style>
  <body>
    <div id="app">
      <div v-cloak class="container">
        <img class="bg-img" src="./static/images/bg/loginbg.png" />
        <div class="login-box">
          <div class="login-content">
            <div class="login-title">
              分片处理大文件管理系统
            </div>
            <div class="login-form">
              <el-input v-model="username" class="login-form-input" style="margin-bottom: 24px;" placeholder="请输入用户名" size="small" >
              </el-input>
              <el-input type="password" v-model="password" class="login-form-input" style="margin-bottom: 24px;" placeholder="请输入密码" size="small" >
              </el-input>
              <el-button type="primary" @click="login" style="width: 100%;">登 录</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./static/js/vue2.6.14.min.js"></script>
  <script src="./static/js/axios1.2.3.min.js"></script>
  <script src="./static/js/request.js"></script>
  <script src="./static/js/element-ui2.15.7.min.js"></script>
  <script>
      new Vue({
      props: [],
      components: {},
      data() {
        return {
          userModal: false,
          password: "",
          username:"",
        }
      },
      watch: {},
      computed: {},
      beforeCreate() {},
      created() {},
      beforeMount() {},
      mounted() {},
      beforeUpdate() {},
      updated() {},
      destroyed() {},
      methods: {
        // 登录方法
        login(){
          if(this.username == ''){
            this.$message.info('请输入用户名')
            return;
          }
          if(this.password == ''){
            this.$message.info('请输入密码')
            return;
          }
          window.location.href='./index.html'
        },
      },
      fillter: {},
    }

    ).$mount("#app")
  </script>
</html>